前端同学都是如何玩转 ChatGPT 的？

作者：木头就是我呀

https://juejin.cn/post/7199607659992907832

ChatGPT忽然登上了国内各大平台的热搜榜，应该在去年11月末的时候就有不少同学了解并使用过，那个时候它刚刚问世，在互联网圈子里有了很大的热度，但是对于大众来说，还是不太了解的。

我在去年的时候就跟风注册了一波，其回答问题的准确性和编码能力让我吃惊。不得不说，ChatGPT作为一个新兴的AI产品，和老美的电影里的人工智能有那么一些相像了，甩了三问一不知的小爱、小度和小E不止一条街。

最近它忽然就🔥出了圈，让很多人惊喜的同时，也让很多人产生了担忧，下面我们一起来聊聊它，以及如何使用它来让我们生动有趣的编码生活变得更有趣起来(斜眼笑)。

HOT! HOT! HOT! 🔥 🔥 🔥

首先我们先来看下最近的热度来的有多么的突然，那简直是太炸裂了，语言不好描述，我收集了一些常见平台的指数截图，大家可以感受一下：

百度指数

点击跳转到百度指数^[1]

image.png

注意，近期的峰值可比去年11月底刚推出的时候高的不是一星半点。

image.png

Google Trends

点击跳转到Google Trends^[2]

image.png

注意，搜索热度最高的国家是中国，这还是在有墙的前提下，看来中国人的忧患意识不是一般的强

微博指数

image.png

ChatGPT是什么❓

在这个产品推出之前，大家应该听说过他们公司的一些其他产品，比如：

• DALL·E 2：openai.com/dall-e-2/^[3]

这是一款图像AI，主要功能有“根据文案绘画”、“无限拓展图像的边界”...

• CodeX：openai.com/blog/openai…^[4]

这是一款自然语言转化成代码的AI产品，它就是之前比较火的微软的GitHub Copilot的驱动模型。

包括ChatGPT在内，他们几个都是衍生自GPT-3的产物，那么GPT到底是什么意思呢？

2018 年 6 月，OpenAI 发布了一篇关于通用语言模型的研究（openai.com/blog/langua…^[5] ），虽然全文都没有出现过 GPT 这个名词，但其实它就是 GPT-1。

这篇文章提出了一个叫作Generative Pre-traing的概念：生成式预训练。

和传统的以任务为导向的训练方法不一样，生成式预训练不需要人工标注，比如我们之前分享的《手把手带你实现 ”在浏览器上进行目标检测“ \- 掘金^[6]》，里面就有需要人工在图片上标注二维码的位置，生成数据集告诉AI，然后AI再根据这些去学习；再比如说你想训练一个可以做中英文翻译的 AI，你就需要提前准备好大量的中英文对照的句子给 AI 去学习。

生成式预训练的思想就不一样了，我直接拿着人类已有的现成的文字资料去训练 AI，怎么训练呢？我就让 AI 根据上文去续写下文，比如一句话，张三每天都很认真地学习，老师们都夸他是好____，“好”字后面我让 AI 去写，如果 AI 写出来的是“学生”，这就和原文一样，那就判断正确了，要是不对，就继续训练它朝着对的方向去走，这种训练方式的好处，就是研究人员不再需要花大量的资源去人工准备答案，每句话里下一个词就是上一段话的答案，理论上人类现有的所有文字资料，都可以作为训练数据直接喂给 AI 去学习，这就远远大于现有的任何人工制作的数据集。

因为这个预训练过程不需要人工编写答案，所以人类现有的所有文字信息，小说、典籍、歌词、论坛里的回帖，甚至是软件代码，只要硬盘装得下，都可以喂给 AI 模型去学习，不断地增大神经网络模型的参数量，不断地增加训练数据里的文本量，预训练模型的能力就会继续增长，用标注好的数据引导它去做各类具体任务的水平也会相应提升，这种生成式预训练，与一种叫做变形器Transformer的模型结构相结合，就成了 Generative Pre-trained Transformer，取三个字母缩写，就是 GPT。

此后 2019 年的 GPT-2、2020 年的 GPT-3，核心迭代思路都是利用“钞能力”扩大模型规模，GPT-2 的参数总量是 15 亿，GPT-3 更是提高到了惊人的 1750 亿，而截至今天，这条“钞能力”路线依然没有摸到天花板， 还在往下继续。

image.png

以上文案和数据部分来自B站UP主 @林亦LYi：ChatGPT诞生记：先捞钱，再谈理想｜OpenAI翻身史\_哔哩哔哩\_bilibili^[7]  讲解的特别好，大家感兴趣的可以看一下！

ChatGPT能做什么❓❓

ChatGPT不单是聊天机器人，它还能进行撰写邮件、视频脚本、文案、翻译、代码等任务，我尝试使用它来进行了一些测试，下面是一些示例截图：

写邮件

image.png

写短视频脚本

image.png

写代码

image.png

image.png

案件分析

image.png

优化周报

image.png

写小诗

image.png

......

💻 ChatGPT ✖️ 前端

作为一名前端开发同学，我这段时间就在想，在日常生活里我如何使用ChatGPT来帮我做些什么事情来提高开发效率呢？最后想出了几个场景以及我的示例，大家可以参考一下：

一、技术调研 + 文档编写阶段

1、Cover不住的需求点应该用什么技术点来实现比较合适

以我最近在做的需求为例，我需要实现一个比较复杂的树图，类似XMind的那种脑图，我就问了一下它，得到的结果还是比较令我满意的，即使还是有些问题存在。

image.png

image.png

image.png

2、不确定的技术方案（1）

image.png

image.png

2、不确定的技术方案（2）

之前实现过一个浏览器插件，可以一键识别你当前屏幕中所有的二维码，并且将识别结果返回到对应的位置，我想以这个需求为例，让它帮我想想方案。之前的文章：手把手带你实现 ”在浏览器上进行目标检测“ \- 掘金^[8]

插件效果：

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

二、编码阶段

1、正则表达式就不需要自己去写了

image.png

2、代码优化（1）

image.png

image.png

3、代码优化（2）

image.png

4、我想实现一个XX功能，帮我在github上找一个demo

image.png

三、自测阶段

1、帮我测试一下XX方法

image.png

image.png

2、运行不及预期，帮我看看有什么问题

image.png

image.png

四、读源码

image.png

image.png

Σ(⊙▽⊙"a 下面的这些回答把我惊艳到了！它是真的懂这些代码！而且还能帮我找类似的代码！！！

image.png

image.png

image.png

五、不错的VsCode插件

1、ChatGPT中文版

image.png

（不太推荐，当使用之后，就无法使用上下文的方式和ChatGPT交流了，不过因为是中文版，可以装上玩玩）

2、ChatGPT 👍

image.png

推荐!，简单使用下来比较顺畅，该有的快捷功能也都有，最重要的是聊天时是支持上下文的。

image.png

使用展示图：

image.png

🙋🏻 指令的美学

如何和ChatGPT这一类的AI沟通，他们叫做“指令”，好的指令和坏的指令得到的效果是非常不一样的，如果经常使用一些宽泛的生活用语和它交流，那么得到的结果往往不尽人意，甚至和手机里的语音助手没太大的区别。

我们先看一个不太好的例子：

image.png

我们可以看到，它的回答和网上搜索出来的结果没什么两样，当看到这种结果之后，很多人就会觉得：“啊，它不过如此，对我帮助不大”，可是当我们换一种方式来问它，结果可能让你惊艳到，我们重新问：

image.png

image.png

image.png

可以看到，当我们向它发送一些比较专业一些的指令的时候，得到的结果往往也是更专业的，同样，这种结果也是更有参考意义，也是我们更想要的结果。

在发送指令前，希望你的指令最好满足以下几点：

• 内容清晰（省去不必要的文字，每个字尽可能都有用）
• 任务定义明确（帮我制作表格，我要你提供事物的重量和数量）
• 要求具体（比如我要一个清单、我要计算我的TDEE、我要去超市你帮我准备xxx）
• 具有迭代思维（一句话可能问不出来你想要的结果，你可以持续性的和它聊，基于一个或者几个点深入一下）

以上参考：抖音@绝对社，对于如何使用更精确的指令讲解的特别好！推荐大家去看~

🔫 杀死那个ChatGPT？

1、For 教育

在美国，有很大比例的学生拿ChatGPT写作业、写论文、考试，而且ChatGPT给出的答卷往往成绩都很棒~

在一项由宾夕法尼亚大学沃顿商学院Christian Terwiesch教授进行的研究显示：ChatGPT能够通过沃顿MBA课程的期末考试。这位宾大教授1月17日发表的名为《ChatGPT能否获得MBA学位》的论文中称：经过实际测试，其考试得分介于B-和B之间。

该教授指出，ChatGPT“在解决基本运营管理和流程分析问题方面，包括基于案例研究的问题方面都表现出色”。机器人给出的解释也非常优秀，它还“非常擅长根据人类提示修改其答案”。

鉴于这一系列情况，斯坦福大学终于坐不住了。他们的研究人员已经开发了一种名为DetectGPT的工具。这工具可以帮助教师识别使用ChatGPT或其他类似的大型语言模型 (LLM) 生成的内容。（魔法才能打败魔法😎）

号称“干翻媒体人”的ChatGPT，已被多家出版机构“封杀”^[9]

多家期刊、出版机构禁止将ChatGPT列为论文合著者^[10]

ChatGPT遭美国多市学校封杀^[11]

2、For 程序员

它面进Google了！你怕不怕！它的工资可能比你还高哈哈哈！

18万美元offer！ChatGPT通过谷歌L3入职测试，人类码农危？^[12]

ChatGPT 通过谷歌 L3 工程师入职测试，年薪 18 万美元^[13]

ChatGPT版必应搜索悄悄上线又下线，但评测已经出炉^[14]

3、For 其他岗位

从这周的搜索数据趋势来看，很多人还是怕了的，“它究竟会不会代替我！”

瑟瑟发抖？基于ChatGPT的AI律师太过强大 被人类律师疯狂阻挠^[15]

放心 ChatGPT们不会完全取代会计,也不会完全取代审计,理由如下\_会计审计第一门户-中国会计视野^[16]

ChatGPT来编辑部上班了，这篇推送它写的^[17]

🔚 结束语

如上，ChatGPT像一个💣一样引爆了全网的讨论热潮，但是这个热潮终将会慢慢褪去，在兴奋的向他人疯狂安利它之余，我也看到了很多人的思考，综合一些我自己的思考，总结了以下几点：

• 它的出现真的会让很多人失业吗？
• 它的出现无疑是划时代的，当前时间节点还正处在“新”时代的前期，我应该怎样接受它的存在并且高效且合理的使用它来为我服务？
• 未来AI遍地的时候，究竟还需要什么样的人才？中国式教育下出来的高材生在那个时代还有什么竞争力？
• 这应该是一波风口，新的风口下，会出现什么新的岗位，未来的社会又会发生什么样的变化？
• 未来互联网上发言的AI是不是会超过真实的用户？如果出现一些谁声音大谁就有理的公共议题讨论会怎么办？

当然，以上的一些想法会比较偏保守一些，后期肯定也会有更多的法律或者条款来限制AI的野蛮生长，前段时间马斯克也讲到“人工智能比核弹更可怕，要成立AI监管机构”。

不过作为一个普通用户来看，目前的ChatGPT还是一个值得一试的产品，它真的可以为我们提升蛮多的效率。

目前大家使用的ChatGPT是从GPT3.5衍生出来的AI产品，其训练集并不是互联网上实时的数据，而是来自截止到2021年的数据。

image.png

它还处于一个婴儿阶段，还有很多不成熟的地方，据OpenAI统计，从2012年到2020年，人工智能模型训练消耗的算力增长了30万倍，平均每3.4个月翻一番，超过了摩尔定律的每18个月翻番的增速😱。

畅想一下未来~ 我们可以和钢铁侠一样，拥有一个知晓所有事物的Jarvis，你在工作、生活中的时候来上那么一句：帮我看看这段代码有没有什么漏洞、帮我想一下xx功能怎么实现、我想做一个xxx，帮我画个图纸，图纸画好之后，交给3D打印机，打印好之后告诉我...

而且这个未来，应该很近。

参考资料

[1]

https://index.baidu.com/v2/main/index.html#/trend/chatgpt?words=chatgpt: https://link.juejin.cn?target=https%3A%2F%2Findex.baidu.com%2Fv2%2Fmain%2Findex.html%23%2Ftrend%2Fchatgpt%3Fwords%3Dchatgpt

[2]

https://trends.google.com/trends/explore?date=today%203-m&q=chatgpt: https://link.juejin.cn?target=https%3A%2F%2Ftrends.google.com%2Ftrends%2Fexplore%3Fdate%3Dtoday%25203-m%26q%3Dchatgpt

[3]

https://openai.com/dall-e-2/: https://link.juejin.cn?target=https%3A%2F%2Fopenai.com%2Fdall-e-2%2F

[4]

https://openai.com/blog/openai-codex/: https://link.juejin.cn?target=https%3A%2F%2Fopenai.com%2Fblog%2Fopenai-codex%2F

[5]

https://openai.com/blog/language-unsupervised/: https://link.juejin.cn?target=https%3A%2F%2Fopenai.com%2Fblog%2Flanguage-unsupervised%2F

[6]

https://juejin.cn/post/7044717306823311368: https://juejin.cn/post/7044717306823311368

[7]

https://www.bilibili.com/video/BV1Te4y1w7D6/?spm_id_from=333.337.search-card.all.click&vd_source=99acb313a9a41c2ae58ef6a3e44dfa74: https://link.juejin.cn?target=https%3A%2F%2Fwww.bilibili.com%2Fvideo%2FBV1Te4y1w7D6%2F%3Fspm_id_from%3D333.337.search-card.all.click%26vd_source%3D99acb313a9a41c2ae58ef6a3e44dfa74

[8]

https://juejin.cn/post/7044717306823311368: https://juejin.cn/post/7044717306823311368

[9]

https://m.cls.cn/detail/1259465: https://link.juejin.cn?target=https%3A%2F%2Fm.cls.cn%2Fdetail%2F1259465

[10]

https://m.thepaper.cn/newsDetail_forward_21830839: https://link.juejin.cn?target=https%3A%2F%2Fm.thepaper.cn%2FnewsDetail_forward_21830839

[11]

https://weibo.com/1845864154/Ms2Yt4WOT?type=repost: https://link.juejin.cn?target=https%3A%2F%2Fweibo.com%2F1845864154%2FMs2Yt4WOT%3Ftype%3Drepost

[12]

https://finance.sina.com.cn/tech/csj/2023-02-06/doc-imyetumr6368098.shtml: https://link.juejin.cn?target=https%3A%2F%2Ffinance.sina.com.cn%2Ftech%2Fcsj%2F2023-02-06%2Fdoc-imyetumr6368098.shtml

[13]

https://it.sohu.com/a/637754318_114760: https://link.juejin.cn?target=https%3A%2F%2Fit.sohu.com%2Fa%2F637754318_114760

[14]

https://zhuanlan.zhihu.com/p/604168742: https://link.juejin.cn?target=https%3A%2F%2Fzhuanlan.zhihu.com%2Fp%2F604168742

[15]

https://redian.news/wxnews/249153: https://link.juejin.cn?target=https%3A%2F%2Fredian.news%2Fwxnews%2F249153

[16]

https://shuo.news.esnai.com/article/202302/238212.shtml: https://link.juejin.cn?target=https%3A%2F%2Fshuo.news.esnai.com%2Farticle%2F202302%2F238212.shtml

[17]

https://redian.news/wxnews/260319: https://link.juejin.cn?target=https%3A%2F%2Fredian.news%2Fwxnews%2F260319

- EOF -

推荐阅读  点击标题可跳转

觉得本文对你有帮助？请分享给更多人

关注「大前端技术之路」加星标，提升前端技能

点赞和在看就是最大的支持❤️